<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>光子科技借款平台</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <link href="<%=path%>/css/common.css" rel="stylesheet"/>
    <link href="<%=path%>/css/index.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="<%=path%>/js/jquery.min.js"></script>
    <script type="text/javascript" src="<%=path%>/js/common.js"></script>
    <link type="text/css" rel="stylesheet" href="<%=path%>/css/index.css"/>
    <link type="text/css" rel="stylesheet" href="<%=path%>/css/index2.css"/>
    <link rel="stylesheet" href="<%=path%>/css/owl.carousel.css"/>
    <script type="text/javascript" src="<%=path%>/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="<%=path%>/js/superslide.2.1.js"></script>
    <script type="text/javascript" src="<%=path%>/js/my.js"></script>
    <script type="text/javascript" src="<%=path%>/js/bootstrap.min.js"></script>

    <style>
        body{
            overflow-x:hidden;
        }
        /*上下滚动*/
        #scrollDiv {
            width: 400px;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
        }

        #scrollDiv li {
            height: 30px;
            padding-left: 10px;
        }
    </style>
    <script type="text/javascript">
        // 上下滚动
        function AutoScroll(obj) {
            $(obj).find("ul:first").animate({
                    marginTop: "-25px"
                },
                500,
                function () {
                    $(this).css({
                        marginTop: "0px"
                    }).find("li:first").appendTo(this);
                });
        }

        $(document).ready(function () {
            var myar = setInterval('AutoScroll("#scrollDiv")', 3000);
            $("#scrollDiv").hover(function () {
                    clearInterval(myar);
                },
                function () {
                    myar = setInterval('AutoScroll("#scrollDiv")', 3000)
                }); //当鼠标放上去的时候，滚动停止，鼠标离开的时候滚动开始
        });
    </script>
</head>
<body>
<!-- 网站头部-->
<%@include file="./common/header.jsp" %>
<!--banner-->
<div class="flexslider">
    <ul class="slides">
        <c:forEach var="s" items="${homeList}">
            <li style="background-image: url(<%=path%>/${s.pic1}); width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1; background-position: 50% 0px; background-repeat: no-repeat no-repeat;"
                class=""><a href="${s.l1}" target="_blank"></a></li>
            <li style="background-image: url(<%=path%>/${s.pic2}); width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1; background-position: 50% 0px; background-repeat: no-repeat no-repeat;"
                class=""><a href="${s.l2}" target="_blank"></a></li>
            <li style="background-image: url(<%=path%>/${s.pic3}); width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1; background-position: 50% 0px; background-repeat: no-repeat no-repeat;"
                class=""><a href="${s.l3}" target="_blank"></a></li>

        </c:forEach>

    </ul>
</div>
<script src="<%=path%>/js/jquery.flexslider-min.js"></script>
<script>
    $(function () {
        $('.flexslider').flexslider({
            directionNav: true,
            pauseOnAction: false
        });
        //产品列表滚动
        var pLength = $('.pListContentBox > li').length;
        var cishu = pLength - 4;
        var n = 0;
        $('.pListContentBox').css({'width': pLength * 245 + 'px'});
        if (pLength > 4) {
            $('.pListRight').addClass('curr');
        }
        $('.pListRight').on('click', function () {
            if (cishu > 0) {
                //alert('1');
                n++;
                cishu--;
                $('.pListContentBox').animate({'left': '-' + n * 244 + 'px'}, 500);
                if (cishu == 0) {
                    $('.pListRight').removeClass('curr');
                }
                if (n > 0) {
                    $('.pListLeft').addClass('curr');
                }
            }
        });
        $('.pListLeft').on('click', function () {
            if (n > 0) {
                n--;
                cishu++;
                $('.pListContentBox').animate({'left': '-' + n * 244 + 'px'}, 500);
                if (n == 0) {
                    $('.pListLeft').removeClass('curr');
                }
                if (cishu > 0) {
                    $('.pListRight').addClass('curr');
                }
            }
        });
        //alert(pLength);
    });
</script>

<script type="text/javascript">
    var gaintop;
    $(function () {
        gaintop = $(".login_float").css("top");
        $(".login_float").css("top", -695);
        $(".login_float").show();
        $(".login_float").animate({top: gaintop, opacity: 1}, 800);
        $(".login_float").animate({top: '-=12px', opacity: 1}, 200);
        $(".login_float").animate({top: gaintop, opacity: 1}, 200);
        $(".login_float").animate({top: '-=6px', opacity: 1}, 200);
        $(".login_float").animate({top: gaintop, opacity: 1}, 200);
        $(".login_float").animate({top: '-=2px', opacity: 1}, 100);
        $(".login_float").animate({top: gaintop, opacity: 1}, 100);
    });
</script>
<div class="new-announcement">
    <div class="new-announcement-title">最新公告</div>
    <div class="new-announcement-content">
        <div id="scrollDiv">
            <ul style="margin-top: 0px;">
                <c:if test="${requestScope.noticeList!=null}">
                    <c:forEach var="a" items="${noticeList}">
                        <li><a class="black-link" href="<%=path%>/notice/initNotice/${a.nid}"
                               title="${a.title}">${a.title}</a></li>
                    </c:forEach>
                </c:if>
            </ul>
        </div>
    </div>
    <a class="more" href="#">更多</a></div>

<!--中间内容-->

<div style="background-color: white;width: 1190px;height: auto;margin: 0 auto" >
    <div class="gzjr" style="width:1200px; height:auto; margin:0 auto; text-align:center">
        <div class="tit">关于光子金融</div>
        <img src="<%=path%>/images/arrow-down.png" class="dashline"/>
        <div class="sub">
            <div>光子金融，微光照亮世界，释放无穷力量！</div>
            <div>我们是光子金融，聚焦微小、服务小微！我们致力于搭建一个资源共享的平台，让您的每个细微需求都能得到最及时的响应。</div>
            <div class="titblue">光子金融简介：</div>
            <div>光子金融金融是交通银行倾力打造的在线金融信息服务平台，是交通银行互联网金融的集团军。以专业的风控模型为基础、以先进的信息技术</div>
            <div>为手段、以高效的资产管理为创新，为广大客户带来、优质、高效、贴心的互联网投融资新体验！</div>
            <div class="titblue">光子金融亮点：</div>
            <div>健全的风险管理体系。我们采用专业的风险控制管理模型，最大限度地保障客户利益。</div>
            <div>顶尖的人才队伍建设。我们拥有一流的专业人才队伍建设，帮助客户实现财富增值梦想。</div>
            <div>创新的产品设计能力。我们主动突破传统金融产品驱动方式，满足客户多样化的金融需求。</div>
            <div class="titblue">光子金融态度：</div>
            <div>光子金融坚信，微光照亮世界！光子金融希望通过我们的专业力量，激发小微能量！</div>
            <div>点滴微光，照亮万象！</div>
        </div>
        <div class="clear"></div>
        <a href="javascript:;" class="showP">
            <img src="<%=path%>/images/arrow-up.gif" class="aUp"/>
            <img src="<%=path%>/images/arrow-down.gif" class="aDown"/></a>
    </div>


</div>
<div style="background-color: white;width: 1190px;height: 730px;margin: 0 auto" >
    <div class="gzjr">
        <div class="tit">我的存在，只因有您</div>
        <img src="<%=path%>/images/arrow-down.png" class="dashline"/>
        <div class="iconBox">
            <ul class="ul_iconBox">
                <li>
                    <div class="fxtBg"style="background-image: url('<%=path%>/images/app-1.png')" ></div>
                    <div class="iconTit">放心投 //</div>
                    <div class="croLine"></div>
                    <div class="fon16"><span class="titblue">放心投</span> 期限短 收益稳</div>
                    <div class="fon16">投得放心 立竿见影</div>
                    <div class="more_lj">了解更多</div>
                </li>
                <li>
                    <div class="fxtBg0" style="background-image: url('<%=path%>/images/app-2.png')"></div>
                    <div class="iconTit">安心享 //</div>
                    <div class="croLine"></div>
                    <div class="fon16"><span class="titblue">安心享</span> 收益高 风控强</div>
                    <div class="fon16">坐享回报 稳稳幸福</div>
                    <div class="more_lj">了解更多</div>
                </li>
                <li>
                    <div class="fxtBg1" style="background-image: url('<%=path%>/images/app-3.png')"></div>
                    <div class="iconTit">开心抢 //</div>
                    <div class="croLine"></div>
                    <div class="fon16"><span class="titblue">开心抢</span> 手快有 手慢无</div>
                    <div class="fon16">超额惊喜 感恩有你</div>
                    <div class="more_lj">了解更多</div>
                </li>
            </ul>
        </div>
    </div>
</div>


<div class="clear"></div>
<div class="pickShell" style="background-image: url('<%=path%>/images/banner-2.jpg'); width: 1400px"></div>

<div class="clear"></div>
<div class="gzjr">
    <div class="tit">投资小故事</div>
    <img src="<%=path%>/images/arrow-down.png" class="dashline"/>
</div>
<div class="clear"></div>
<div id="indexInvStory">
    <div class="column">
        <div class="leftRight">
            <a class="tp" href="javascript:;"></a>
            <a class="tp1" href="javascript:;"></a>
        </div>
        <div class="column_t myContainer">
            <div id="owl-carousel" class="owl-carousel">
                <div class="column_t_c">
                    <div class="col">
                        <h3>《第3种爱情》上映了，电影院走起 ... ...</h3>
                    </div>
                    <div>
                        <img src="<%=path%>/images/image_1.jpg"/>
                    </div>
                    <div class="textBox">
                        <ul>
                            <li>我有1千元，投资3个月，</li>
                            <li>到期本金+利息=1025元，</li>
                            <li>净收益<span class="showOut">25</span>元，仅仅1张电影票？</li>
                            <li>不止如此！</li>
                        </ul>
                        <a href="#">去电影院很简单</a>
                    </div>
                </div>
                <div class="column_t_c">
                    <div class="col">
                        <h3>心仪已久的手表就在眼前... ...</h3>
                    </div>
                    <div>
                        <img src="<%=path%>/images/image_2.jpg"/>
                    </div>
                    <div class="textBox">
                        <ul>
                            <li>我有1万元，投资12个月</li>
                            <li>到期本金+利息=11450元，</li>
                            <li>净收益<span class="showOut">1450</span>元，包包、手表?</li>
                            <li>不止如此！</li>
                        </ul>
                        <a href="#">亮丽手表，马上拥有</a>
                    </div>
                </div>
                <div class="column_t_c">
                    <div class="col">
                        <h3>iPhone 6s 玫瑰金，我的最爱... ...</h3>
                    </div>
                    <div>
                        <img src="<%=path%>/images/image_3.jpg"/>
                    </div>
                    <div class="textBox">
                        <ul>
                            <li>我有5万元，投资12个月</li>
                            <li>到期本金+利息=57250元，</li>
                            <li>净收益<span class="showOut">7250</span>元，IPHONE6 PLUS?</li>
                            <li>不止如此！</li>
                        </ul>
                        <a href="#">换个手机，换份心情</a>
                    </div>
                </div>
                <div class="column_t_c">
                    <div class="col">
                        <h3>《第3种爱情》上映了，电影院走起 3 ... ...</h3>
                    </div>
                    <div>
                        <img src="<%=path%>/images/image_2.jpg"/>
                    </div>
                    <div class="textBox">
                        <ul>
                            <li>我有1千元，投资3个月，</li>
                            <li>到期本金+利息=1025元，</li>
                            <li>净收益<span class="showOut">25</span>元，仅仅1张电影票？</li>
                            <li>不止如此！</li>
                        </ul>
                        <a href="#">去电影院很简单</a>
                    </div>
                </div>
                <div class="column_t_c">
                    <div class="col">
                        <h3>《第3种爱情》上映了，电影院走起 3 ... ...</h3>
                    </div>
                    <div>
                        <img src="<%=path%>/images/image_4.jpg"/>
                    </div>
                    <div class="textBox">
                        <ul>
                            <li>我有1千元，投资3个月，</li>
                            <li>到期本金+利息=1025元，</li>
                            <li>净收益<span class="showOut">25</span>元，仅仅1张电影票？</li>
                            <li>不止如此！</li>
                        </ul>
                        <a href="#">去电影院很简单</a>
                    </div>
                </div>
                <div class="column_t_c">
                    <div class="col">
                        <h3>《第3种爱情》上映了，电影院走起 3 ... ...</h3>
                    </div>
                    <div>
                        <img src="<%=path%>/images/image_1.jpg"/>
                    </div>
                    <div class="textBox">
                        <ul>
                            <li>我有1千元，投资3个月，</li>
                            <li>到期本金+利息=1025元，</li>
                            <li>净收益<span class="showOut">25</span>元，仅仅1张电影票？</li>
                            <li>不止如此！</li>
                        </ul>
                        <a href="#">去电影院很简单</a>
                    </div>
                </div>
                <div class="column_t_c">
                    <div class="col">
                        <h3>《第3种爱情》上映了，电影院走起 3 ... ...</h3>
                    </div>
                    <div>
                        <img src="<%=path%>/images/image_3.jpg"/>
                    </div>
                    <div class="textBox">
                        <ul>
                            <li>我有1千元，投资3个月，</li>
                            <li>到期本金+利息=1025元，</li>
                            <li>净收益<span class="showOut">25</span>元，仅仅1张电影票？</li>
                            <li>不止如此！</li>
                        </ul>
                        <a href="#">去电影院很简单</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="<%=path%>/js/bootstrap.min.js"></script>
<script src="<%=path%>/js/owl.carousel.min.js"></script>
<script src="<%=path%>/js/index2.js"></script>




<!-- 网站底部-->
<%@include file="./common/footer.jsp" %>

</body>
</html>